<style>
	.__40px .select2-container .select2-selection--single{
		height: 40px;
	}
	.__40px .select2-container--default .select2-selection--single .select2-selection__rendered{
		line-height: 40px;
	}
	.__40px .select2-container--default .select2-selection--single .select2-selection__arrow{
		top : 6px;
	}
</style>

<h3>常用表单元素</h3>
<div class="panel-body no-tb-padder">
	<form class="form-horizontal xs-form" id="form_1">
		<div class="form-group">
			<label class="col-lg-2 control-label">文本</label>
			<label class="col-lg-3 control-label tl">这是一段文本</label>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">输入框</label>
			<div class="col-lg-3">
				<input type="text" class="form-control input-sm">
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">日期控件</label>
			<div class="col-lg-3">
				<div class="input-group w-all">
					<input type="text" class="form-control input-sm" data-type="date">
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">单选下拉框</label>
			<div class="col-lg-3">
				<select class="form-control input-sm" data-type="select">
					<option value="1">下拉1</option>
					<option value="2">下拉2</option>
					<option value="3">下拉3</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">40px单选下拉框</label>
			<div class="col-lg-3 __40px">
				<select class="form-control input-sm" data-type="select">
					<option value="1">下拉1</option>
					<option value="2">下拉2</option>
					<option value="3">下拉3</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">多选下拉框</label>
			<div class="col-lg-3">
				<select class="form-control input-sm" data-type="select" multiple>
					<option value="1">下拉1</option>
					<option value="2">下拉2</option>
					<option value="3">下拉3</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">switch开关</label>
			<div class="col-lg-3">
				<input type="checkbox" data-type="switch" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">checkbox</label>
			<div class="col-lg-3">
				<input type="checkbox" data-type="checkbox" txt="选项一">
				<input type="checkbox" data-type="checkbox" txt="选项二">
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">radio</label>
			<div class="col-lg-3">
				<input type="radio" data-type="checkbox" name="radio" txt="选项一">
				<input type="radio" data-type="checkbox" name="radio" txt="选项二">
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">radio</label>
			<div class="col-lg-3">
				
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">弹出框</label>
			<label class="col-lg-3 control-label tl"><a href="javascript:void(0)" id="dialog_btn">弹出框</a></label>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">弹出框带tipDialog</label>
			<label class="col-lg-3 control-label tl"><a href="javascript:void(0)" id="dialog_btn1">弹出框</a></label>
		</div>
	</form>
</div>

<h3>表单校验</h3>
<div class="panel-body no-tb-padder">
	<form class="form-horizontal xs-form" id="form_2">
		<div class="form-group">
			<label class="col-lg-2 control-label">密码</label>
			<div class="col-lg-3">
				<input type="text" data-id="pwd_2" class="form-control input-sm" validate="password,equalTo:confirmpwd_2">
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-2 control-label">确认密码</label>
			<div class="col-lg-3">
				<input type="text" data-id="confirmpwd_2" validate="password,equalTo:pwd_2" class="form-control input-sm">
			</div>
		</div>
	</form>
	<a id="submit_2" data-id="submit_2">提交</a>
</div>

<div class="panel-body no-tb-padder">
	<form class="form-horizontal xs-form" id="form_3">
		<div class="form-group">
			<label class="col-lg-2 control-label">资产图标</label>
			<label class="col-lg-2 control-label">
				<a id="submit_2" data-id="submit_3">提交</a>
			</label>
		</div>
	</form>
	
</div>


<h2>popper</h2>

<select name="" id="">
	<option value="0">1</option>
	<option value="1">2</option>
	<option value="2">3</option>
	<option value="3">4</option>
	<option value="4">5</option>
</select>
<div class="container" style="padding: 100px 50px 10px;">
	<button type="button" class="btn btn-default has-popover" title="Popover title" data-container="body" data-toggle="popover"
	    data-placement="left" data-content="左侧的 Popover 中的一些内容">
		左侧的 Popover
	</button>
	<button type="button" class="btn btn-primary" title="Popover title" data-container="body" data-toggle="popover" data-placement="top"
	    data-content="顶部的 Popover 中的一些内容">
		顶部的 Popover
	</button>

	<button id="id3" type="button" class="btn btn-warning" title="Popover title">
		右侧的 Popover
	</button>
	<div class="popperGroup" style="display:none">
		<button id="id1" type="button" class="btn btn-success" title="Popover title" data-container="body" data-toggle="popover"
			data-placement="bottom" data-content="底部的 Popover 中的一些内容">
		底部的 Popover
		</button>
	</div>
</div>
<script>
	$(document).ready(function () {

		//---------------------------------------------------------------------------------------------------------

		// 表单需要调用 index_form_init方法进行初始化
		// 下拉框需要在标签上加上data-type="select"，这样可以渲染成select2格式
		index_form_init($("#form_1"))

		//---------------------------------------------------------------------------------------------------------
		g_validate.init($("#form_2"))
		$("#submit_2").click(function () {
			g_validate.validate($("#form_2"))
		})

	})
	$(function () {
		$("[data-toggle='popover']").popover();
		$("#id3").popover({
			placement: 'right',
			html: true,
			content: $("#id1")
		})
	});

	$("#dialog_btn").click(function (){
		g_dialog.dialog('<div><div class="table_div" id="dialog_table" style="height:300px"></div></div>' ,{
			width : "600px",
			init : function (el){
				var grid_head_1 = [
						{name:"code_1",text:"普通字段",tip:true,width:30,align:"left"},
						{name:"code_2",text:"渲染字段",render:function (txt,rowData){
							// txt 为当前字段的值,rowData为当前行的数据对象
							// return的值就是渲染在页面的值
							if (txt == "1")
								return '<span title="这里写你要写的title">渲染之的值</span>'
							else
								return "随意渲染"
						}}
					  ]
				var grid_data_1 = [
									{code_1:"普通字段值1",code_2:"1"},
									{code_1:"普通字段值2",code_2:"2"}
								  ]

				g_grid.render($("#dialog_table") ,{
					header : grid_head_1,
					data : grid_data_1,
					hasIndex : true
				})
			}
		})
	})

	$("#dialog_btn1").click(function (){
		g_dialog.dialog('<div id="dialog1_div"></div>' ,{
			width : "600px",
			init : function (el){
				el.find("#dialog1_div").append($("#form_3").parent().html())
			},
			initAfter : function (el){
				el.find("[data-id=submit_3]").click(function (){
					g_dialog.tipDialog(el.find("[data-id=submit_3]") ,{
						title : "test",
						width : "300px",
						height : "100px",
						htmlStr : "<div>123<br>123<br>123<br>123<br>123<br></div>",
						leftCorrect : 300
					})
				})
			}
		})
	})
</script>